<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="vtc" uri="/ls-trade-tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<html>
<head>
	<title>2nd Level Planning</title>
</head>
<body>

<div class="content">

	<script>
		
		function clickBtn(action) {
			switch (action) {
			case "search":
				$("#mainForm_search").attr("value", "true");
				//$("#mainForm").attr("action", "category!searchCategory.action");
				break;
			case "clear":
				$("#mainForm_search").attr("value", "false");
				break;
			}
			$("#mainForm").attr("action","plan-second!list.action");
			$("#mainForm").submit();
		}
		
		function getLevel1PlanningStatus(categoryId, index) {
			$.ajax({
				url : "plan-second!getLevel1PlanningStatus.action?categoryId="
						+ categoryId,
				cache : true,
				dataType : "json",
				async : false,
				success : function(data) {
					if(data.FirstLevel!=null && data.FirstLevel!="" && data.FirstLevel!="undefined"){
						document.getElementById("level1Status_"+index).innerHTML=data.FirstLevel;
					}
				},
				error : function(data) {
					//alert("error : "+data);
				}
			});
		}
	</script>
	<div class="pageTitle">2nd Level Planning</div>
	<div class="form1">
	<form id="mainForm" method="post">
	<s:hidden id="mainForm_search" name="search"></s:hidden>
		<table border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td class="sep"><img src="../images/spacer.gif"
					style="width: 180px;" /></td>
				<td class="sep sep2"><img src="../images/spacer.gif" /></td>
			</tr>
			<tr>
				<td><label class="fLabel">Planning Exercise</label>
					<div class="fField">
					  	<s:select id="planYear" name="level2Planning.planningExercise"
								list="categoryService.allCategoryOrderByYear" listKey="key" listValue="value"
								cssClass="inputSelect" cssStyle="width: 155px"  headerValue="--All--" headerKey="">
							</s:select>
							
					</div></td>
			</tr>
		</table>
		<div class="btnSet btnSetTypeB">
			<div class="left">
				<div class="button">
					<div class="left">
						<div class="right">
							<input class="inputButton" type="button" id="" name=""
								value="Search" onclick="clickBtn('search')" />
						</div>
					</div>
				</div>
				<div class="button">
					<div class="left">
						<div class="right">
							<input class="inputButton" type="button" id="" name=""
								value="Clear" onclick="clickBtn('clear')"/>
						</div>
					</div>
				</div>

			</div>
		</div>

	
	<s:if test="%{page!=null&&page.result!=null&&page.result.size()!=0}">
		<div class="sListBorder">
			<div class="sList">
				<table width="100%" cellspacing="0" cellpadding="0" border="0"
					class="sTable">
					<tbody>
						<tr>
							<td class="sTh t" style="width: 150px">Planning Exercise</td>
							<td class="sTh t">Planning Exercise Name</td>
							<td class="sTh t">1st Level Planning Status</td>
							<td class="sTh t">Status</td>
						</tr>
						<s:iterator value="page.result" var="level2Planning" status="st">
							<tr class="sRow2">
								<td class="sCell"><s:property value="#level2Planning.planningExercise" /></td>
								<td class="sCell">
									<a href="plan-second!input.action?level2Planning.id=<s:property value='#level2Planning.id'/>">
										<s:property value="#level2Planning.planning.category.planningExerciseName" />
									</a>
								</td>
								<td class="sCell" id="level1Status_<s:property value='#st.index'/>"><script type="text/javascript">getLevel1PlanningStatus('<s:property value="#level2Planning.planning.category.id" />','<s:property value="#st.index"/>');</script> </td>
								<td class="sCell"><s:property value="#level2Planning.planning.status.label" /></td>
							</tr>
						</s:iterator>
					</tbody>
				</table>
			</div>
			<vtc:paging page="%{page}"></vtc:paging>
		</div>
	</s:if>
			</form>
	</div>
	<!-- InstanceBeginEditable name="content" -->


	<!-- InstanceEndEditable -->
</div>

</body>
</html>